
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	
	<title>Full Page Background Image | CSS #1</title>
	
	<style>
		
		img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		
		#page-wrap { position: relative; width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
		p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
	</style>
</head>

<body>

	<img src="./bg1.jpg" class="bg">
	
	<div id="page-wrap">
	
		<p>내용 내용내용 내용</p> 
		<p>내용 내용내용 내용</p> 
		<p>내용 내용내용 내용</p> 
		<p>내용 내용내용 내용</p> 
		<p>내용 내용내용 내용</p> 
	
	</div>
	<audio style="display:none;" src="http://babydoons.free.fr/love%20song/Kelly%20Clarkson%20-%20Because%20Of%20You.mp3" controls="controls" autoplay="autoplay"></audio>

 <style type="text/css" style="display: none !important;">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		overflow-x: hidden;
	}
	#demo-top-bar {
		text-align: left;
		background: #222;
		position: relative;
		zoom: 1;
		width: 100% !important;
		z-index: 6000;
		padding: 20px 0 20px;
	}
	#demo-bar-inside {
		width: 960px;
		margin: 0 auto;
		position: relative;
	}
	#demo-bar-buttons {
		padding-top: 10px;
		float: right;
	}
	#demo-bar-buttons a {
		font-size: 12px;
		margin-left: 20px;
		color: white;
		margin: 2px 0;
		text-decoration: none;
		font: 14px "Lucida Grande", Sans-Serif !important;
	}
	#demo-bar-buttons a:hover,
	#demo-bar-buttons a:focus {
		text-decoration: underline;
	}
	#demo-bar-badge {
		display: inline-block;
		width: 302px;
		padding: 0 !important;
		margin: 0 !important;
		background-color: transparent !important;
	}
	#demo-bar-badge a {
		display: block;
		width: 100%;
		height: 38px;
		border-radius: 0;
		bottom: auto;
		margin: 0;
		background: url(/images/examples-logo.png) no-repeat;
		background-size: 100%;
		overflow: hidden;
		text-indent: -9999px;
	}
	#demo-bar-badge:before, #demo-bar-badge:after {
		display: none !important;
	}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function() {
// 	$("body").scrollTop(20);

	var scrollTop = $(this).scrollTop(); // 현재 스크롤 값을 변수에 넣어준다.
	$("body").scrollTop(0);
	var body = $("body"); // 위치를 변수에 넣어준다. 
	 
	body.animate({ // body의 스크롤을 animate로 움직여준다. 변수화 시키지않아도  $("body")로 써도 된다.
	"scrollTop": 200
	}, 9000);
});
$(window).scroll(function(){ // 참고) body의 경우 스크롤을 반환하지 못하더라. 그 경우, body가 아닌 window를 쓴다.

});
	

</script>
</body>

</html>